<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="top-navigate bg-white" style="padding: 53px 10px 20px 10px;">
      <view class="content cuIcon-back text-xl top-navigate-title" @click="goBack()">
      </view>
      <scroll-view scroll-x class="bg-white nav text-center">
        <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in orderType" :key="index"
          @tap="tabSelect" :data-id="index">
          {{item}}
        </view>
      </scroll-view>
    </view>
    <!-- 订单列表 -->
    <keep-alive>
      <view v-for="(item,index) in finishedOrder" :key="index" v-if="TabCur===0">
        <order-in-finished-card :order="item" @get-order-Info="getItemInfo"></order-in-finished-card>
      </view>
      <view v-for="(item,index) in unFinishedOrder" :key="index" v-if="TabCur===1">
        <order-in-finished-card :order="item" @get-order-Info="getItemInfo"></order-in-finished-card>
      </view>
    </keep-alive>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        TabCur: 0,
        orderType: ['已完成', '未完成'],
        scrollLeft: 0,
        runnerId: '',
        orderList:[],
        finishedOrder:[],
        unFinishedOrder:[]
      };
    },
    onLoad(options) {
      this.runnerId = options.runnerId
    },
    mounted() {
      this.getAllOrder()
    },
    methods: {
      ...mapMutations('m_runner', ['updateOrderList']),
      ...mapActions('m_runner', ['getAllOrderList']),
      async getAllOrder() {
        const res = await this.getAllOrderList(this.runnerId);
        console.log(res.data.length);
        this.finishedOrder=res.data.filter((item)=> item.finished);
        this.unFinishedOrder=res.data.filter((item)=> !item.finished);
      
      },
      //返回按钮
      goBack() {
        uni.navigateBack(-1);
      },
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      },
      //获取订单详情信息
      getItemInfo(item) {
        uni.redirectTo({
          url:'/subpkg-runner/navigation/navigation?order='+JSON.stringify(item)
        })
      },
      
    },
    computed: {}
  }
</script>

<style lang="scss">
  page {
    background-color: #ecfdfa;
  }
  
  .top-navigate {
    z-index: !important;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }
  }

  .nav .cu-item {
    margin: 0px 60rpx;
  }
</style>